<template>
	<div class="navbar">
		<div class="navBody">
			<div class="navbar-left">
				<div class="menu-item logo-box">
					<img src="../assets/logo02.png" @click="$router.push({path:'/'})" alt="logo">
				</div>
				<div class="verticalNav menu-item">
					<i slot="reference" class="el-icon-menu"></i>
					<div class="verticalNav-box">
						<nav class="verticalNav-menu-demo">
							<router-link class="verticalNav-menu-item" to="/">{{$t("navModel.home")}}</router-link>
							<router-link class="verticalNav-menu-item" to="/aboutUs">{{$t("navModel.about")}}
							</router-link>
							<router-link class="verticalNav-menu-item" to="/device">{{$t("navModel.equipment")}}
							</router-link>
							<router-link class="verticalNav-menu-item" to="/store">{{$t("navModel.shop")}}</router-link>
							<router-link class="verticalNav-menu-item" to="/serviceIdea">{{$t("navModel.service")}}
							</router-link>
							<router-link class="verticalNav-menu-item" to="/partners">{{$t("navModel.body")}}
							</router-link>
							<router-link class="verticalNav-menu-item" to="/contactInformation">{{$t("navModel.phone")}}
							</router-link>
						</nav>
					</div>
				</div>
				<nav class="menu-demo">
					<router-link class="menu-item" to="/">{{$t("navModel.home")}}</router-link>
					<router-link class="menu-item" to="/aboutUs">{{$t("navModel.about")}}</router-link>
					<router-link class="menu-item" to="/device">{{$t("navModel.equipment")}}</router-link>
					<router-link class="menu-item" to="/store">{{$t("navModel.shop")}}</router-link>
					<router-link class="menu-item" to="/serviceIdea">{{$t("navModel.service")}}</router-link>
					<router-link class="menu-item" to="/partners">{{$t("navModel.body")}}</router-link>
					<router-link class="menu-item" to="/contactInformation">{{$t("navModel.phone")}}</router-link>
				</nav>
			</div>
			<div class="navbar-right">
				<div class="menu-item">
					<el-dropdown trigger="click" @command="setLanguage">
						<span class="el-dropdown-link">
							{{languages[language]}}
							<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown" class="el-dropdown-menu">
							<el-dropdown-item class="el-dropdown-item" command="zh">中文</el-dropdown-item>
							<el-dropdown-item class="el-dropdown-item" command="en">English</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	export default {
		name: "Nav",
		data() {
			return {
				language: "zh",
				languages: {
					"zh": "中文",
					"en": "English"
				},
				activeIndex: '/body'
			}
		},
		mounted() {

		},
		methods: {
			// // 切换语言
			setLanguage(i) {
				this.language = i
				this.$i18n.locale = i
			}
		}
	}
</script>

<style scoped>
	@keyframes s {
		0% {
			height: 0;
		}

		100% {
			height: 60px;
		}
	}

	@keyframes x {
		0% {
			height: 60px;
		}

		100% {
			height: 0;
		}
	}

	/* 导航栏的样式 */
	.navbar {
		/* background-color: rgba(21, 113, 196, 1); */
		background-color: rgba(0, 0, 0, 0.9);
		overflow: hidden;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
		display: flex;
		justify-content: center;
		user-select: none;
	}

	.navBody {
		width: 1200px;
		height: 60px;
		display: flex;
		justify-content: space-between;
	}

	.navbar-left {
		display: flex;
	}

	.logo-box img {
		width: 110px;
		margin: 0 20px 0 0;
	}

	/* 导航栏 */
	nav a.router-link-exact-active {
		/* color: #42b983; */
	}

	.menu-demo {
		font-size: 0.9rem;
		color: #fff;
		height: 60px;
		display: flex;
	}

	.menu-item {
    font-family: "Fy";
		font-size: 0.9rem;
		/* font-weight: bold; */
		text-decoration: none;
    border-bottom: 1px #ffffff solid;
    border-width: 0;
		color: #fff;
		height: 90%;
		padding: 0 20px;
		display: flex;
		justify-content: center;
		align-items: center;
    transition: all 0.1s;
	}


	.menu-item:hover {
		cursor: pointer;
		color: #bebebe;
    border-width:unset;
	}


	/* 国际化 */
	.navbar-right {
		/* background-color: #9ee3d8; */
	}

	.el-dropdown-link {
		color: #fff;
		font-size: 0.9rem;
		white-space: nowrap;
	}

	.el-dropdown-link:hover {
		color: #bebebe;
	}

	.el-dropdown-link:hover i {
		color: #bebebe;
	}

	.el-dropdown-link i {
		color: #fff;
		font-size: 0.9rem;
	}

	/* 语言切换下拉框 */
	.el-dropdown-menu {
		background-color: rgba(0, 0, 0, 0.2) !important;
	}

	.el-dropdown-item {
		color: #fff;
	}

	.el-dropdown-item:hover {
		background-color: rgba(0, 0, 0, 0) !important;
		color: #bebebe !important;

	}

	/* 竖向导航栏 */
	.verticalNav {
		display: none;
		position: relative;
	}

	.verticalNav:hover .verticalNav-box {
		display: block;
	}

	.verticalNav-box {
		display: none;
		z-index: 999;
		position: fixed;
		left: 120px;
		top: 60px;
		/* background-color: rgba(21, 113, 196, 1); */
		background-color: rgba(0, 0, 0, 0.9);

	}

	.verticalNav-menu-demo {
		font-size: 0.9rem;
		color: #fff;
		display: flex;
		flex-direction: column;
	}

	.verticalNav-menu-item {
		font-size: 0.9rem;
		text-decoration: none;
		color: #fff;
		padding: 20px;
		width: 120px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.verticalNav-menu-item:hover {
		cursor: pointer;
		color: #bebebe;
	}

	@media screen and (max-width: 950px) {
		.verticalNav {
			display: flex;
			align-items: center;
			justify-content: center;

		}

		.menu-demo {
			display: none;
		}
	}
</style>
